<template>
  <div class="mx-auto">
    <div class="py-19">
      <h1 class="text-2xl font-semibold">咸鱼</h1>

      <div class="text-gray-500 py-4">这是测试文字</div>

      <div>
        <GithubLogo class="logs" />
      </div>
    </div>

    <ul>
      <li v-for="article of articles" :key="article.slug">
        <NuxtLink :to="`p/${article.slug}`" class="post-card">
          <h1 class="text-2xl font-medium">
            {{ article.title }}
          </h1>

          <div class="des">
            {{ article.description }}
          </div>

          <div>
            <time>
              {{ formatDate(article.updatedAt) }}
            </time>
          </div>
        </NuxtLink>
      </li>
    </ul>

    <div v-if="articles.length > 5" class="py-8 flex justify-end">
      <RButton>下一页</RButton>
    </div>
  </div>
</template>

<script>
import RButton from '../components/common/RButton.vue';
import { formatDate } from '@/utils';
import GithubLogo from '~/assets/images/img/github.svg?inline';

export default {
  name: 'IndexPage',
  components: {
    GithubLogo,
    RButton,
  },
  async asyncData({ $content, params }) {
    const articles = await $content('articles')
      .only(['title', 'description', 'img', 'slug', 'updatedAt'])
      .sortBy('createdAt', 'asc')
      .limit(5)
      .fetch();

    return {
      articles,
    };
  },
  methods: {
    formatDate,
  },
};
</script>

<style scoped>
.post-card {
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  display: block;
  transition: all 0.1s;
  margin-bottom: 32px;
}
.post-card:last-child {
  margin-bottom: 0;
}
.post-card:active {
  transform: scale(0.9);
}

.logs {
  width: 26px;
  height: 26px;
}

.des {
  padding: 5px 0;
}
</style>
